<template>
  <XenPageLayout
    title="工作台"
    title-align="left"
    :show-back="false"
    navbar-bg-color="#7881de"
    navbar-text-color="#ffffff"
    navbar-icon-color="#ffffff"
    contentStyle="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 0; height: 100vh; display: flex; flex-direction: column;"
  >
    <!-- 导航栏右侧插槽 -->
    <template #right>
      <view class="nav-right-btn" @click="handleAddApp">
        <uni-icons type="plus" size="32" color="#ffffff"></uni-icons>
      </view>
    </template>

    <!-- 主体内容 -->
    <view class="work-container">
      <!-- 欢迎区域 -->
      <view class="welcome-section">
        <view class="user-info">
          <view class="avatar">
            <image
              v-if="userInfo?.PhotoId"
              :key="avatarKey"
              :src="getImageUrl(userInfo.PhotoId)"
              class="avatar-img"
              mode="aspectFill"
            />
            <uni-icons
              v-else
              type="person-filled"
              size="32"
              color="#ffffff"
            ></uni-icons>
          </view>
          <view class="user-details">
            <text class="greeting"
              >{{ getGreeting() }}，{{ userInfo?.Name || "用户" }}</text
            >
          </view>
        </view>
      </view>

      <!-- 应用内容区域 -->
      <view class="apps-section">
        <!-- 待办事项统计模块 -->
        <view class="todo-stats-section">
          <view class="stats-container">
            <view class="stat-card" @click="handleUnreadTodos">
              <view class="stat-icon unread-icon">
                <uni-icons
                  type="notification"
                  size="20"
                  color="#ffffff"
                ></uni-icons>
              </view>
              <view class="stat-content">
                <text class="stat-number">{{ todoStats.Pending }}</text>
                <text class="stat-label">未读待办</text>
              </view>
            </view>

            <view class="stat-card" @click="handleCompletedTodos">
              <view class="stat-icon completed-icon">
                <uni-icons
                  type="checkmarkempty"
                  size="20"
                  color="#ffffff"
                ></uni-icons>
              </view>
              <view class="stat-content">
                <text class="stat-number">{{ todoStats.Completed }}</text>
                <text class="stat-label">我的已办</text>
              </view>
            </view>

            <view class="stat-card" @click="handleInitiatedTodos">
              <view class="stat-icon initiated-icon">
                <uni-icons
                  type="paperplane"
                  size="20"
                  color="#ffffff"
                ></uni-icons>
              </view>
              <view class="stat-content">
                <text class="stat-number">{{ todoStats.My }}</text>
                <text class="stat-label">我发起的</text>
              </view>
            </view>

            <!-- 消息通知卡片 - 放在最右边 -->
            <view class="stat-card" @click="handleNotifications">
              <view class="stat-icon notification-icon">
                <uni-icons
                  type="chatbubble"
                  size="20"
                  color="#ffffff"
                ></uni-icons>
              </view>
              <view class="stat-content">
                <text class="stat-number">{{ unreadNotificationCount }}</text>
                <text class="stat-label">消息通知</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 员工数据统计模块 -->
        <!-- <view class="employee-stats-section">
          <EmployeeStatistics
            :data="employeeStatsData"
            :loading="employeeStatsLoading"
            :error="employeeStatsError"
            @retry="loadEmployeeStatistics"
            @status-card-click="handleEmployeeStatusClick"
          />
        </view> -->

        <!-- 加载状态 -->
        <view v-if="loading" class="loading-container">
          <uni-icons type="spinner-cycle" size="24" color="#666"></uni-icons>
          <text class="loading-text">加载中...</text>
        </view>

        <!-- 应用分类列表 -->
        <view v-else-if="appCategories.length > 0" class="categories-container">
          <view
            v-for="category in appCategories"
            :key="category.id"
            class="category-section"
          >
            <view class="category-header">
              <view class="category-icon">
                <uni-icons
                  :type="category.icon as any"
                  size="18"
                  color="#7881de"
                ></uni-icons>
              </view>
              <text class="category-title">{{ category.name }}</text>
            </view>

            <view class="apps-grid">
              <view
                class="app-card"
                v-for="app in category.apps"
                :key="app.ID"
                @click="handleAppClick(app)"
              >
                <view class="app-icon">
                  <i
                    v-if="app.MenuIcon"
                    :class="app.MenuIcon"
                    style="font-size: 28px; color: #ffffff"
                  ></i>
                  <uni-icons
                    v-else
                    :type="getAppIcon(app.MenuName) as any"
                    size="20"
                    color="#7881de"
                  ></uni-icons>
                </view>
                <text class="app-name">{{ app.MenuName }}</text>
              </view>
            </view>
          </view>
          <!-- 测试版 -->
          <!-- <view class="category-section">
            <view class="category-header">
              <view class="category-icon">
                <uni-icons type="gear" size="18" color="#7881de"></uni-icons>
              </view>
              <text class="category-title">测试</text>
            </view>
            <view class="apps-grid">
              <view
                class="app-card"
                v-for="app in ceshiapps"
                :key="app.ID"
                @click="handleAppClick(app)"
              >
                <view class="app-icon">
                  <i
                    v-if="app.MenuIcon"
                    :class="app.MenuIcon"
                    style="font-size: 28px; color: #ffffff"
                  ></i>
                  <uni-icons
                    v-else
                    :type="getAppIcon(app.MenuName) as any"
                    size="20"
                    color="#7881de"
                  ></uni-icons>
                </view>
                <text class="app-name">{{ app.MenuName }}</text>
              </view>
            </view>
          </view> -->
        </view>

        <!-- 空状态 -->
        <view v-else class="empty-container">
          <uni-icons type="bars" size="48" color="#ccc"></uni-icons>
          <text class="empty-text">暂无应用</text>
          <view class="empty-desc-row">
            <text class="empty-desc">点击右上角</text>
            <uni-icons
              type="plus"
              size="32"
              color="#999"
              @click="handleAddApp"
            ></uni-icons>
            <text class="empty-desc">添加应用</text>
          </view>
        </view>
      </view>
    </view>
  </XenPageLayout>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, computed } from "vue";
import { onShow as uniOnShow } from "@dcloudio/uni-app";
import XenPageLayout from "@/layouts/XenPageLayout.vue";
import EmployeeStatistics from "@/components/EmployeeStatistics.vue";
import type { IUserInfo } from "../login/api/interface";
import { UserInfoEvents } from "../../utils/eventBus";
import useMenuApi from "../menu/api/index";
import type { ISearchResult } from "../menu/api/interface";
import useWorkApi from "./api/index";
import type {
  TodoStatistics,
  EmployeeStatistics as EmployeeStatsType,
} from "./api/interface";
import type { ISysNotificationQuery } from "./api/interface";
import { ensureUserInfoStructure } from "@/utils/authFunction";
import {
  useMenuData,
  generateAppCategories,
  getWhitelistPath,
  isInWhitelist,
  getAppIcon,
} from "../../utils/menu";
import { getGreeting } from "../../utils/formatTime";

// 用户信息
const userInfo = ref<IUserInfo | null>(null);
// 用于强制刷新头像的时间戳
const refreshTimestamp = ref(Date.now());
// 加载状态
const loading = ref(false);
// 已添加的应用列表
const addedApps = ref<ISearchResult[]>([]);
// 菜单数据
const menuData = ref<{ menuCategories: any[]; flatMenus: any[] }>({
  menuCategories: [],
  flatMenus: [],
});
// 测试
const ceshiapps = ref([
  {
    ID: "23",
    MenuIcon: "icon-gongwenbao",
    MenuId: "23",
    MenuName: "访客记录",
    MenuUrl: "/subpkg-newvisitor/visitor/sysvisitorrecordrequestbill/index",
    SortOrder: 1,
    UserName: "admin",
  },
  {
    ID: "23",
    MenuIcon: "icon-gongwenbao",
    MenuId: "23",
    MenuName: "访客信息",
    MenuUrl: "/subpkg-newvisitor/visitor/sysvisitorinformation/index",
    SortOrder: 1,
    UserName: "admin",
  },
  {
    ID: "23",
    MenuIcon: "icon-gongwenbao",
    MenuId: "23",
    MenuName: "物料测试",
    MenuUrl: "/subpkg-ceshi/create",
    SortOrder: 1,
    UserName: "admin",
  },
]);
// API 实例
const menuApi = useMenuApi();
const workApi = useWorkApi();

// 数据加载状态
const isDataLoaded = ref(false);

// 待办事项统计数据
const todoStats = ref<TodoStatistics>({
  Pending: 0, // 待处理数量
  Completed: 0, // 已完成数量
  Collaborated: 0, // 协作数量
  My: 0, // 我创建的数量
});

// 未读通知数量
const unreadNotificationCount = ref(0);

// 员工统计数据相关
const employeeStatsLoading = ref(false);
const employeeStatsError = ref<string | null>(null);
const employeeStatsData = ref<EmployeeStatsType | null>(null);

// 计算头像的key，确保头像更新时重新渲染
const avatarKey = computed(() => {
  return `avatar-${userInfo.value?.PhotoId || "default"}-${
    refreshTimestamp.value
  }`;
});

// 应用分类数据
const appCategories = computed(() => {
  console.log("addedApps", menuData.value.menuCategories);
  return generateAppCategories(addedApps.value, menuData.value.menuCategories);
});

// 获取图片URL
const getImageUrl = (fileId: string) => {
  if (!fileId) return "";
  return `${import.meta.env.VITE_BASE_URL}/api/_file/getfile/${fileId}?t=${
    refreshTimestamp.value
  }`;
};

// 加载用户信息的通用方法
const loadUserInfo = (forceRefresh = false) => {
  const cachedUserInfo = uni.getStorageSync("userInfo");

  if (cachedUserInfo) {
    const oldPhotoId = userInfo.value?.PhotoId;
    const newPhotoId = cachedUserInfo.PhotoId;

    userInfo.value = cachedUserInfo;

    // 如果头像ID发生变化或强制刷新，则更新时间戳
    if (oldPhotoId !== newPhotoId || forceRefresh) {
      refreshTimestamp.value = Date.now();
    }
  }
};

// 加载菜单数据
const loadMenuData = () => {
  const data = useMenuData();
  menuData.value = data;
};

// 查询已添加的应用
const loadAddedApps = async () => {
  try {
    loading.value = true;

    // 检查token是否存在
    const token = uni.getStorageSync("token");
    if (!token) {
      console.log("Token不存在，跳过加载应用");
      addedApps.value = [];
      return;
    }

    const response = await menuApi.search({
      Limit: 1000,
      Page: 1,
    });
    console.log("response", response);
    addedApps.value = response.Data || [];
  } catch (error) {
    console.error("加载应用失败:", error);
    addedApps.value = [];
  } finally {
    loading.value = false;
  }
};

// 加载待办事项统计数据
const loadTodoStatistics = async () => {
  try {
    // 检查token是否存在
    const token = uni.getStorageSync("token");
    if (!token) {
      console.log("Token不存在，跳过加载待办统计");
      return;
    }

    const response = await workApi.GetStatistics();
    console.log("待办统计数据:", response);

    // 直接使用API返回的数据结构
    todoStats.value = {
      Pending: response.Pending || 0,
      Completed: response.Completed || 0,
      Collaborated: response.Collaborated || 0,
      My: response.My || 0,
    };
  } catch (error) {
    console.error("加载待办统计失败:", error);
    // 保持默认值
    todoStats.value = {
      Pending: 0,
      Completed: 0,
      Collaborated: 0,
      My: 0,
    };
  }
};

// 加载未读通知数量
const loadUnreadNotificationCount = async () => {
  try {
    // 检查token是否存在
    const token = uni.getStorageSync("token");
    if (!token) {
      console.log("Token不存在，跳过加载未读通知数量");
      return;
    }

    const queryParams: ISysNotificationQuery = {
      Status: "未读",
    };

    const response = await workApi.search(queryParams);
    console.log("未读通知数据:", response);

    // 获取未读通知数量
    unreadNotificationCount.value = response.Data?.length || 0;
  } catch (error) {
    console.error("加载未读通知数量失败:", error);
    // 保持默认值
    unreadNotificationCount.value = 0;
  }
};

// 加载员工统计数据
const loadEmployeeStatistics = async () => {
  try {
    employeeStatsLoading.value = true;
    employeeStatsError.value = null;

    // 检查token是否存在
    const token = uni.getStorageSync("token");
    if (!token) {
      console.log("Token不存在，跳过加载员工统计数据");
      return;
    }

    // 并行调用两个API接口
    const [statusStatsResponse, detailStatsResponse] = await Promise.all([
      workApi.getEmployeeStatusStatistics(),
      workApi.getEmployeeDistributionStatistics(),
    ]);

    // 合并两个API的返回数据，组装成符合 EmployeeStatistics 接口的数据结构
    employeeStatsData.value = {
      statusStats: statusStatsResponse,
      detailStats: detailStatsResponse,
    };

    console.log("员工统计数据加载成功:", employeeStatsData.value);
  } catch (error) {
    console.error("加载员工统计数据失败:", error);

    // 根据错误类型提供更具体的错误信息
    let errorMessage = "加载员工统计数据失败，请重试";

    if (error && typeof error === "object") {
      // 检查是否是网络错误
      if ("code" in error && error.code === "NETWORK_ERROR") {
        errorMessage = "网络连接失败，请检查网络后重试";
      }
      // 检查是否是权限错误
      else if (
        "status" in error &&
        typeof error.status === "number" &&
        error.status === 401
      ) {
        errorMessage = "登录已过期，请重新登录";
      }
      // 检查是否是服务器错误
      else if (
        "status" in error &&
        typeof error.status === "number" &&
        error.status >= 500
      ) {
        errorMessage = "服务器暂时不可用，请稍后重试";
      }
      // 如果有具体的错误消息
      else if ("message" in error && typeof error.message === "string") {
        errorMessage = error.message;
      }
    }

    employeeStatsError.value = errorMessage;
  } finally {
    employeeStatsLoading.value = false;
  }
};

// 修改 initializeData 函数，在工作台 work.vue 中
const initializeData = async () => {
  if (isDataLoaded.value) return;

  loading.value = true;

  try {
    // 首先检查本地是否有 token
    const token = uni.getStorageSync("token");

    if (!token) {
      console.log("没有登录凭证，跳转到登录页");
      // #ifdef MP-WEIXIN
      uni.redirectTo({
        url: "/pages/login/select",
      });
      // #endif
      // #ifndef MP-WEIXIN
      uni.navigateTo({
        url: "/pages/login/login",
      });
      // #endif
      return;
    }

    // 如果本地没有用户信息或菜单数据，则主动请求
    const localUserInfo = uni.getStorageSync("userInfo");

    if (!localUserInfo || !localUserInfo.Attributes?.Menus) {
      // 导入登录API
      const loginApi = (await import("../login/api/login")).default();

      try {
        // 主动请求获取用户信息
        const userInfoResponse = await loginApi.getUserInfo();

        // 使用工具函数确保用户信息结构完整
        const safeUserInfo = ensureUserInfoStructure(userInfoResponse);

        // 保存用户信息到本地
        uni.setStorageSync("userInfo", safeUserInfo);
        userInfo.value = safeUserInfo;
      } catch (error) {
        console.error("获取用户信息失败", error);
      }
    } else {
      // 如果本地有数据，先检查数据结构完整性
      const safeUserInfo = ensureUserInfoStructure(localUserInfo);

      // 如果结构被修正了，重新保存到本地存储
      if (safeUserInfo !== localUserInfo) {
        uni.setStorageSync("userInfo", safeUserInfo);
      }

      userInfo.value = safeUserInfo;
    }

    // 加载菜单数据
    loadMenuData();

    // 加载添加的应用
    await loadAddedApps();

    // 加载待办事项统计
    await loadTodoStatistics();

    // 加载未读通知数量
    await loadUnreadNotificationCount();

    // 加载员工统计数据
    await loadEmployeeStatistics();
  } catch (error) {
    console.error("初始化数据失败", error);
  } finally {
    loading.value = false;
    isDataLoaded.value = true;
  }
};

// 处理应用点击
const handleAppClick = (app: ISearchResult) => {
  // 首先检查是否在白名单中
  if (isInWhitelist(app.MenuName)) {
    // 从白名单配置中获取路径
    const whitelistPath = getWhitelistPath(app.MenuName);

    if (whitelistPath) {
      // 直接跳转到白名单路径，不传递任何参数
      uni.navigateTo({
        url: whitelistPath,
      });
      return;
    }
  }

  // 如果不在白名单中或白名单中没有找到路径，则使用原来的逻辑
  if (app.MenuUrl) {
    // 直接跳转到应用URL，不传递任何参数
    uni.navigateTo({
      url: app.MenuUrl,
    });
  } else {
    uni.showToast({
      title: "应用地址不存在",
      icon: "error",
    });
  }
};

// 处理添加应用
const handleAddApp = () => {
  uni.navigateTo({
    url: "/pages/menu/menu",
  });
};

// 处理未读待办点击
const handleUnreadTodos = () => {
  console.log("点击了未读待办");
  // 跳转到待办中心页面，传递状态参数
  uni.navigateTo({
    url: "/subpkg-todocenter/index?status=待办&limit=9999&page=1",
  });
};

// 处理我的已办点击
const handleCompletedTodos = () => {
  console.log("点击了我的已办");
  // 跳转到待办中心页面，传递状态参数
  uni.navigateTo({
    url: "/subpkg-todocenter/index?status=已办&limit=9999&page=1",
  });
};

// 处理我发起的点击
const handleInitiatedTodos = () => {
  console.log("点击了我发起的");
  // 跳转到待办中心页面，传递状态参数
  uni.navigateTo({
    url: "/subpkg-todocenter/index?status=我的提交&limit=9999&page=1",
  });
};

// 处理消息通知点击
const handleNotifications = () => {
  console.log("点击了消息通知");
  // 跳转到系统通知页面
  uni.navigateTo({
    url: "/subpkg-sysnotification/index?limit=9999&page=1",
  });
};

// 处理员工状态卡片点击
const handleEmployeeStatusClick = (type: string, value: number) => {
  console.log("点击了员工状态卡片:", type, value);
  // 移除提示弹框，可以在这里添加其他逻辑，比如跳转到详情页面
};

// 用户信息事件监听器取消函数
let unsubscribeUserEvents: (() => void) | null = null;

// 页面加载时获取用户信息
onMounted(async () => {
  await initializeData();

  // 监听用户信息更新事件
  unsubscribeUserEvents = UserInfoEvents.on((eventData) => {
    if (eventData.data) {
      userInfo.value = eventData.data;
      refreshTimestamp.value = Date.now();
      // 如果用户信息更新，也需要重新加载菜单数据
      loadMenuData();
    }
  });
});

// 页面显示时刷新用户信息
uniOnShow(async () => {
  // 如果数据未初始化，则进行初始化
  if (!isDataLoaded.value) {
    await initializeData();
  } else {
    // 已初始化则只刷新必要数据
    loadUserInfo(true);
    loadMenuData();
    await loadAddedApps();
    // 加载待办事项统计
    await loadTodoStatistics();
    // 加载未读通知数量
    await loadUnreadNotificationCount();
    // 加载员工统计数据
    // await loadEmployeeStatistics();
  }
});

// 页面卸载时移除事件监听
onUnmounted(() => {
  if (unsubscribeUserEvents) {
    unsubscribeUserEvents();
    unsubscribeUserEvents = null;
  }
});
</script>

<style lang="scss" scoped>
.nav-right-btn {
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.9);
  }
}

.work-container {
  display: flex;
  flex-direction: column;

  .welcome-section {
    padding: 24px;
    flex-shrink: 0;

    .user-info {
      display: flex;
      align-items: center;
      gap: 16px;

      .avatar {
        width: 64px;
        height: 64px;
        border-radius: 32px;
        border: 3px solid rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex-shrink: 0;

        .avatar-img {
          width: 100%;
          height: 100%;
          border-radius: 32px;
          object-fit: cover;
        }
      }

      .user-details {
        flex: 1;
        min-width: 0;

        .greeting {
          display: block;
          color: #ffffff;
          font-size: 20px;
          font-weight: 600;
          word-break: break-all;
          line-height: 1.3;
        }
      }
    }
  }

  .todo-stats-section {
    padding: 0 0 16px 0;
    flex-shrink: 0;

    .stats-container {
      border-radius: 16px;
      padding: 10px 0 0 0;
      margin-bottom: 8px;
      display: flex;
      gap: 8px;

      .stat-card {
        flex: 1;
        text-align: center;
        background: #ffffff;
        border-radius: 12px;
        padding: 16px 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;

        &:active {
          transform: scale(0.95);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        }

        .stat-icon {
          width: 48px;
          height: 48px;
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 12px;

          &.unread-icon {
            background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
          }

          &.completed-icon {
            background: linear-gradient(135deg, #51cf66 0%, #69db7c 100%);
          }

          &.initiated-icon {
            background: linear-gradient(135deg, #339af0 0%, #74c0fc 100%);
          }

          &.notification-icon {
            background: linear-gradient(135deg, #ffa726 0%, #ffcc02 100%);
          }
        }

        .stat-content {
          .stat-number {
            display: block;
            color: #1a1a1a;
            font-size: 20px;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 4px;
          }

          .stat-label {
            display: block;
            color: #666666;
            font-size: 12px;
            font-weight: 500;
          }
        }
      }
    }
  }

  .employee-stats-section {
    padding: 0 0 24px 0;
    flex-shrink: 0;
    background: #ffffff;
    border-radius: 24px 24px 0 0;
    margin: 0 -24px 24px -24px;
    padding: 24px;

    // 响应式设计
    @media (max-width: 768px) {
      padding: 16px;
      margin: 0 -16px 16px -16px;
      border-radius: 16px 16px 0 0;
    }
  }

  .apps-section {
    flex: 1;
    background: #ffffff;
    border-radius: 24px 24px 0 0;
    padding: 24px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    .loading-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 1;
      gap: 12px;

      .loading-text {
        color: #666;
        font-size: 14px;
      }
    }

    .categories-container {
      flex: 1;

      .category-section {
        margin-bottom: 32px;

        &:last-child {
          margin-bottom: 0;
        }

        .category-header {
          display: flex;
          align-items: center;
          margin-bottom: 16px;
          gap: 8px;

          .category-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: rgba(120, 129, 222, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .category-title {
            color: #1a1a1a;
            font-size: 16px;
            font-weight: 600;
            flex: 1;
          }
        }

        .apps-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 8px;

          .app-card {
            background: #ffffff;
            border-radius: 16px;
            padding: 16px 12px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;

            &:active {
              transform: scale(0.95);
            }

            .app-icon {
              width: 44px;
              height: 44px;
              border-radius: 12px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin: 0 auto 12px;
              background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            }

            .app-name {
              color: #1a1a1a;
              font-size: 12px;
              font-weight: 500;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }

    .empty-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 1;
      gap: 12px;

      .empty-text {
        color: #666;
        font-size: 16px;
        font-weight: 500;
      }

      .empty-desc-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4px;
      }

      .empty-desc {
        color: #999;
        font-size: 14px;
      }
    }
  }
}
</style>
